<ng-container>
  <ng-template *ngIf="'top' === tabBarPosition || 'left' === tabBarPosition"
               [ngTemplateOutlet]="renderTabBar || renderDefaultTabBar">
  </ng-template>
  <div #TabContent
       class="{{prefixCls}}-content-wrap"
       [ngClass]="{'am-tabs-content-wrap-animated': animated}"
       [ngStyle]="{'transform': paneMoveStyle, 'webkitTransform': paneMoveStyle}"
       (touchstart)="onTouchStart($event)"
       (touchmove)="onTouchMove($event)"
       (touchend)="onTouchEnd($event)"
  >
    <ng-content></ng-content>
  </div>
  <ng-template *ngIf="'bottom' === tabBarPosition || 'right' === tabBarPosition"
               [ngTemplateOutlet]="renderTabBar || renderDefaultTabBar"
  ></ng-template>
</ng-container>

<ng-template #renderDefaultTabBar>
  <DefaultTabBar #DefaultTabBar
                 [page]="page"
                 [animated]="animated"
                 [activeTab]="selectedKey"
                 [tabBarPosition]="tabBarPosition"
                 [tabBarBackgroundColor]="tabBarBackgroundColor"
                 [tabBarUnderlineStyle]="tabBarUnderlineStyle"
  >
    <div #TabTitle
         *ngFor="let tabPane of getCurrentTabPanes(); let i = index"
         class="{{prefixCls}}-default-bar-tab"
         [ngClass]="{'am-tabs-default-bar-tab-active': tabPane.active, 'am-tabs-default-bar-tab-disabled': tabPane.disabled}"
         [ngStyle]="tabBarTextStyle"
         [style.color]="tabPane.active ? tabBarActiveTextColor : tabBarInactiveTextColor"
         (click)="clickTab(i)"
    >
      <ng-container *ngIf="tabPane.isTitleString; else titleTemplate">
        {{tabPane.title}}
      </ng-container>
      <ng-template #titleTemplate>
        <ng-template [ngTemplateOutlet]="tabPane.title"></ng-template>
      </ng-template>
    </div>
  </DefaultTabBar>
</ng-template>